<template>
  <div class="sub-out">
    <div class="search border_style bg_style">
      <YsInput class="search-input" clearable @on-focus="clickBlur(true)" @on-blur="clickBlur(false)" @on-enter="getSubscribeAppList" v-model.trim="pege_param.query_keyword" placeholder="请输入任务">
        <YsIcon type="icon iconfont icon-sousuo " @click.native="getSubscribeAppList" :style="{color: inputFocus?'#405680':'rgba(64,86,128,0.6)'}" slot="suffix" />
      </YsInput>
      <Select style="width:200px;margin-right:10px" class="select-border" v-model="page.subscribeState">
        <Option v-for="(item, index) in page.subscribelist" :value="item.state" @click.native="getSubscribeAppList" :key="index" :label="item.name">{{ item.name }}</Option>
      </Select>
      <YsButton type="primary" class="searchBtn" @click="getSubscribeAppList">查询</YsButton>
      <div class="open-btn">
        <YsButton class="right-between" @click="setAdoptReject(1)">开通</YsButton>
        <YsButton class="right-between" @click="setAdoptReject(2)" style="margin-left:10px">拒绝</YsButton>
      </div>
    </div>
    <proTable ref="subscribeTableDom" class="table-st border_style bg_style" :loading="page.tableLoad" @selectionDada="getselectionDada" :columns="page.columns" :data="page.data" @clickPage="onClickPage" :current="pege_param.start_recd"
      :total="page.allTotal" :pageSize="pege_param.limit_recd"></proTable>
    <refuse-modal ref="errorDom" @error_click="errorClick"></refuse-modal>
  </div>
</template>


<script>
import { mapGetters, mapActions } from "vuex";
import RefuseModal from "@/components/refuse/refuseModal.vue";
export default {
  name: "application",
  components: {
    RefuseModal,
  },
  data() {
    return {
      inputFocus: false,
      setappflag: 0,
      pege_param: {
        state: null, //没有类型
        query_keyword: "",
        start_recd: 1, //开始数据
        limit_recd: 14, //查询的条数
      },
      set_up: {
        exa_cause: "",
        manageInfos: [],
      },
      page: {
        subscribeState: 0,
        tableLoad: false,
        allTotal: 0,
        subscribelist: [
          { state: 0, name: "全部状态" },
          { state: 1, name: "已审批" },
          { state: 2, name: "未审批" },
        ],
        columns: [
          {
            type: "selection",
            width: 60,
            className: "selecLeft",
            align: "center",
            tooltip: true
          },
          {
            title: "编号",
            minWidth: 80,
            key: "manage_code",
            tooltip: true
          },
          {
            title: "订阅单位",
            minWidth: 100,
            key: "from_user_name",
            tooltip: true
          },
          {
            title: "应用名称",
            key: "app_name",
            minWidth: 100,
            tooltip: true,
            render: (h, params) => {
              if (params.row.app_name == null || params.row.app_name == '') {
                return h('td', { class: 'text-overflow' }, '--')
              } else {
                return h('td', { class: 'text-overflow' }, params.row.app_name)
              }
            }
          },
          {
            title: "状态",
            minWidth: 100,
            key: "state_name",
            render: (h, params) => {
              if (params.row.exa_res == 1) {
                return h(
                  "div",
                  { class: "setAllStyle setStyle1" },
                  params.row.state_name
                );
              } else if (params.row.exa_res == 2) {
                return h(
                  "div",
                  { class: "setAllStyle  setStyle3" },
                  params.row.state_name
                );
              } else if (params.row.state == 2) {
                return h(
                  "div",
                  { class: "setAllStyle setStyle2" },
                  params.row.state_name
                );
              } else if (params.row.exa_res == 3) {
                return h(
                  "div",
                  { class: "setAllStyle setStyle4" },
                  params.row.state_name
                );
              } else {
                return h("div", {}, params.row.state_name);
              }
            },
            tooltip: true
          },
          {
            title: "订阅时间",
            minWidth: 100,
            key: "manage_time",
            tooltip: true
          },
          {
            title: "审批时间",
            key: "exa_time",
            minWidth: 166,
            render: (h, params) => {
              if (params.row.exa_time == null || params.row.exa_time == "") {
                return h("td", {}, "--");
              } else {
                return h('Tooltip', {
                  props: {
                    placement: 'bottom'
                  }
                }, [
                  params.row.exa_time,
                  h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, params.row.exa_time)
                ])
              }
            },
            tooltip: true
          },
          {
            title: "操作",
            width: 150,
            // align: "center",
            render: (h, params) => {
              let _this = this;
              if (params.row.state == 2) {
                return h("div", [
                  h("span", {
                    domProps: {
                      innerText: "通过",
                    },
                    class: "textColor",
                    on: {
                      click: (event) => {
                        _this.set_up.exa_cause = "";
                        if (_this.set_up.manageInfos.length > 1) {
                          _this.$YsMessage.info("请点击批量操作按钮");
                          return;
                        } else if (_this.set_up.manageInfos.length == 1) {
                          if (_this.set_up.manageInfos[0].id != params.row.id) {
                            _this.$YsMessage.info("请点击批量操作按钮");
                            return;
                          }
                        }
                        _this.set_up.manageInfos[0] = {
                          id: params.row.id,
                          obj_id: params.row.obj_id,
                          exa_res: 1,
                        };
                        _this.openStateClick();
                      },
                    },
                  }),
                  h("span", {
                    domProps: {
                      innerText: "拒绝",
                    },
                    style: {
                      margin: "0 0 0 6px",
                    },
                    class: "textColor2",
                    on: {
                      click: (event) => {
                        _this.$refs.errorDom.textIntro = "";
                        _this.set_up.exa_cause = "";
                        if (_this.set_up.manageInfos.length > 1) {
                          _this.$YsMessage.info("请点击批量操作按钮");
                          return;
                        } else if (_this.set_up.manageInfos.length == 1) {
                          if (_this.set_up.manageInfos[0].id != params.row.id) {
                            _this.$YsMessage.info("请点击批量操作按钮");
                            return;
                          }
                        }
                        _this.set_up.manageInfos[0] = {
                          id: params.row.id,
                          obj_id: params.row.obj_id,
                          exa_res: 2,
                        };
                        _this.$refs.errorDom.$refs.refuseDom.show();
                      },
                    },
                  }),
                ]);
              } else {
                return h("div", [
                  h("span", {
                    domProps: {
                      innerText: "关闭",
                    },
                    class: "textColor",
                    on: {
                      click: (event) => {
                        _this.closeStateClick(1, params.row);
                      },
                    },
                  }),
                ]);
              }
            },
            tooltip: true
          },
        ],
        data: [],
      },
    };
  },

  methods: {
    ...mapActions(["getPageAppSubManageList", "setAppSubExaItem"]),

    //获取服务列表
    getSubscribeAppList() {
      let _this = this;
      this.page.tableLoad = true;
      _this.pege_param.state = this.page.subscribeState
        ? this.page.subscribeState
        : null;
      _this
        .getPageAppSubManageList(this.pege_param)
        .then((res) => {
          let { data, msg, scode, status } = res;
          _this.page.tableLoad = false;
          if (status === "ok") {
            this.page.data = data.beans.map((item, index) => {
              return Object.assign(item, { _disabled: false });
            });
            this.page.allTotal = data.all_recd;
          } else {
            _this.$YsMessage.error(msg);
            this.page.data = [];
            this.page.allTotal = 0;
          }
        })
        .catch((err) => {
          _this.page.tableLoad = false;
          _this.$YsMessage.error("获取数据失败");
        });
    },
    //分页
    onClickPage(pageNum) {
      this.pege_param.start_recd = pageNum;
      this.getSubscribeAppList();
    },
    //批量设置通过还是拒绝
    setAdoptReject(num) {
      if (this.set_up.manageInfos.length > 0) {
        this.set_up.manageInfos.map((item) => {
          item.exa_res = num;
        });
        if (num == 1) {
          this.openStateClick();
        } else {
          this.$refs.errorDom.$refs.refuseDom.show();
        }
      } else {
        this.$YsMessage.warning("请勾选数据");
      }
    },
    //获取选中的内容
    getselectionDada(data) {
      this.set_up.manageInfos = data.map((item, index) => {
        return Object.assign({}, { id: item.id, obj_id: item.obj_id });
      });
    },
    //app订阅是否 通行
    openStateClick() {
      let _this = this;
      _this
        .setAppSubExaItem(_this.set_up)
        .then((res) => {
          let { data, msg, scode, status } = res;
          _this.set_up = _this.$options.data().set_up;
          if (status === "ok") {
            _this.$YsMessage.success(data.message_text);
            _this.$refs.errorDom.$refs.refuseDom.close();
            _this.getSubscribeAppList();
          } else {
            _this.$YsMessage.error(msg);
          }
        })
        .catch((err) => {
          _this.$YsMessage.error("提交失败");
        });
    },

    //错误原因
    errorClick(text) {
      if (typeof text === "boolean") {
        this.set_up = this.$options.data().set_up;
      } else {
        this.set_up.exa_cause = text;
        this.openStateClick();
      }
    },
    //获取焦点失去焦点
    clickBlur(flag) {
      this.inputFocus = flag
    }
  },
  mounted() {
    this.getSubscribeAppList();
  },
};
</script>
<style lang="less" scoped>
.sub-out {
  min-width: 815px;
}
.search {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 72px;
  border: 1px solid #cfd7e5;
  border-radius: 4px;
  margin-bottom: 8px;
  .open-btn {
    margin-left: auto;
    button {
      width: 80px;
      min-width: 80px;
      height: 40px;
      background: rgba(255, 255, 255, 0.39);
      border: 1px solid #0061ff;
      opacity: 1;
      border-radius: 4px;
      color: #0091ff;
      font-size: 16px;
      font-family: PingFang SC;
    }
  }
  .search-input {
    height: 40px;
    width: 208px;
    margin-right: 10px;
    border-radius: 4px;
  }

  .search-btn {
    margin-left: auto;
  }
}
/deep/.setAllStyle {
  width: 81px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
}
/deep/.setStyle1 {
  background: #13b38f;
}
/deep/.setStyle2 {
  background: rgba(0, 145, 255, 1);
}
/deep/.setStyle3 {
  background: #e77930;
}
/deep/.setStyle4 {
  background: #d53939;
}
/deep/ .textColor {
  // color: '#0091FF';
  cursor: pointer;
  color: #0091ff;
  &:hover {
    opacity: 0.8;
  }
}
/deep/ .textColor2 {
  // color: '#0091FF';
  color: #0091ff;
  cursor: pointer;
  &:hover {
    // color: #d53939;
    opacity: 0.8;
  }
}
/deep/.selecLeft {
  .ivu-checkbox {
    margin-right: 0;
  }
}

/deep/ .ivu-select-arrow {
  font-size: 24px !important;
}
.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}
.table-st {
  border: 1px solid #cfd7e5;
  border-radius: 4px;
}
</style>
